<template>
	<div class="head">
        <div v-bind:style="{background:`url(${seller.avatar})`}">
            <div  class="posir white">
                <div class="btn" ref="btn" @click="fun">
                    5个>
                </div>
                <div class="a1 fl"><img :src="seller.avatar" alt=""/></div>
                <div class="a2 fl">
                    <h1 ><img class="a4" src="./img/brand@2x.png" alt="">粥品香坊(大运村）</h1>
                    <p>蜂鸟专送/38分钟送达</p>
                    <p><img class="a5" src="./img/decrease_1@2x.png" alt="">在线支付满28减5，满50减10</p>
                </div>
            </div>
        </div>
        <div class="a3 white">
            <img class="a6" src="./img/bulletin@2x.png" alt="">
            粥品香坊其烹饪粥料的秘方源于中国千年古法，代制作工艺...
        </div>
        <footer>
            <ul class="ovfh">
                <li><img src="" alt=""></li>
                <li>￥</li>
                <li>另外需配送费￥4元</li>
                <li>还差￥10元起送</li>
            </ul>
        </footer>
        <mo v-show="xxyc" v-on:boboji="fun1()"></mo>
    </div>
    <!-- 遮罩层 -->
    
</template>
<script>
    import mo from '../遮罩层/mo'

    export default{
        props: ["seller"],
        created () {
            
        },
        data:function(){
            return {
                xxyc:false,
                // mimi:true

            }
        }, 
        methods: {
            fun(){
                // console.log(this.$refs.btn)
                this.xxyc=true
            },
            fun1(fl){
                this.xxyc=fl
            }
        },
        components: {
            mo
        },
    }    
</script>
<style>
 
    footer{
        width: 100%;
        background-color: gray;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 4rem;
        z-index: 200;
    }
    footer ul li{
        float: left;
    }
    .btn{
        position: absolute;  
        padding: .7rem;      
        right: 1.2rem;
        border-radius: 40%;
        bottom: 1.8rem;
        font-size: 1rem;
        color:white;
        height: 2.4rem;
        width: 3rem;
        background-color: rgba(0, 0, 0, 0.2);
    }
    .a1 img{
        width: 6.4rem;
        height: 6.4rem;
        border-radius: 10%;
    }
    .posir{
        padding: 2.4rem 2.4rem 1.2rem 1.8rem;
        background-color: rgba(7, 17, 27, 0.5);
        overflow: hidden;        
    }
    .a1{
        width: 6.4rem;
        height: 6.4rem;
        margin-right: 1.6rem;
        
    }
    .a2 h1{
        font-size: 1.6rem;
        line-height: 1.8rem;
        font-weight: bold;
        
    }
    .a3{
        font-size: 1rem;
        font-weight: 10rem;
        padding: .5rem .5rem;
        background-color: rgba(0, 0, 0, 0.2);
    }
    .a4{
        width: 3rem;
        height: 1.8rem;
        vertical-align: middle;
    }
    .a5{
        width: 1.2rem;
        height: 1.2rem;
        vertical-align: middle;
    }
    .a6{
        width: 2.2rem;
        height: 1.2rem;
        vertical-align: middle;
    }
</style>

